<template>
<el-scrollbar v-loading="hotsinger == ''">
    <div class="singer">
      <div class="info">
        <div class="singer-con">
          <div class="singer-header">
             <div class="singer-lang">
                <span>语种：</span>
                <ul>
                  <li v-for="(item,index) in langlist" :key="index" :class="{'c62e2e':langNum === index}" @click="langNum = index">{{item.name}}</li>
                </ul>
             </div>
             <div class="singer-class">
                <span>分类：</span>
                <ul>
                  <li v-for="(item,index) in classlist" :key="index" :class="{'c62e2e':classNum===index}" @click="classNum = index">{{item.name}}</li>
                </ul>
             </div>
             <div class="singer-filter">
                <span>筛选：</span>
                <ul>
                  <li v-for="(item,index) in filterlist" :key="index" :class="{'c62e2e':filterNum===index}" @click="filterNum = index">{{item.name}}</li>
                </ul>
             </div>
          </div>
          <div class="singer-container">
             <ul>
               <li v-for="item in hotsinger" :key="item.id" class="imgli">
                 <div class="singer-img"><img v-lazy="item.img1v1Url" alt=""></div>
                 <p class="ellipsis">
                   <span class="ellipsis">{{item.name}}</span>
                   <i class="el-icon-user"></i>
                 </p>
               </li>
             </ul>
          </div>
        </div>
      </div>
    </div>
  </el-scrollbar>
</template>
<script>
  import {getHotSinger} from '@/api/api'
  export default{
    data(){
      return{
        hotsinger:[], //热门歌手
        langlist:[{name:'全部'},{name:'华语'},{name:'欧美'},{name:'日本'},{name:'韩国'},{name:'其他'}],
        langNum: 0,
        classlist:[{name:'全部'},{name:'男歌手'},{name:'女歌手'},{name:'乐队组合'}],
        classNum: 0,
        filterlist:[{name:'热门'},{name:'A'},{name:'B'},{name:'C'},{name:'D'},{name:'E'},{name:'F'},{name:'G'},{name:'H'},{name:'I'},{name:'J'},{name:'K'},{name:'L'},{name:'M'},{name:'N'},{name:'O'},{name:'P'},{name:'Q'},{name:'R'},{name:'S'},{name:'T'},{name:'U'},{name:'V'},{name:'W'},{name:'X'},{name:'Y'},{name:'Z'}],
        filterNum: 0,
      }
    },
    methods:{
      _gethotsinger(){
        getHotSinger().then(res=>{
          if(res.status == 200){
            this.hotsinger =  res.data.artists;
            // console.log(this.hotsinger);
          }
        })
      }
    },
    mounted(){
      this._gethotsinger();
    }
  }
</script>
<style scoped="scoped">
.singer{
  width: 100%;
  height: auto;
  padding: 0px 28px;
}
.singer-con{
  width: 100%;
  height: auto;
}
.singer-header{
  width: 100%;
  height: auto;
  padding: 20px 0;
}
.singer-header div{
  line-height: 32px;
  font-size: 13px;
  color: #666;
  display: flex;
  align-items: center;
}
.singer-header div ul{
  display: flex;
  align-items: center;
}
.singer-header div ul li {
  height: 12px;
  padding: 0px 12px;
  font-size: 12px;
  border-left: 1px solid #E4E4E7;
  line-height: 12px;
  color: #999999;
}
.singer-header div ul li:nth-of-type(1){
  border-left: 0;
}
.singer-container{
  width: 100%;
}
.singer-container ul{
  display: flex;
  flex-wrap: wrap;
}
.singer-container ul li{
  width: 148px;
  height: auto;
  margin: 0px 0px 20px 20px;
  position: relative;
}
.singer-container ul li:nth-of-type(6n-5){
  margin-left: 0px;
}
.singer-container ul li .singer-img{
  width: 100%;
  height: 148px;
  border: 1px solid #E4E4E7;
  overflow: hidden;
}
.singer-container ul li .singer-img img{
  display: block;
  width: 100%;
}

.singer-container ul li p{
  line-height: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.singer-container ul li p i{
  color: #c72e2e;
}


/* 选中的分类颜色 */
.singer-header div  ul .c62e2e{
  color: #C62E2E;
}
</style>
